@use '../tp';

.#{tp.$prefix}-coltxtv {
	display: flex;
	width: 100%;

	// Mode selector wrapper
	&_m {
		@extend %tp-list;

		margin-right: 4px;
	}
	// Mode selector
	&_ms {
		@extend %tp-resetUserAgent;

		border-radius: tp.cssVar('blade-border-radius');
		color: tp.cssVar('label-fg');
		cursor: pointer;
		height: tp.cssVar('container-unit-size');
		line-height: tp.cssVar('container-unit-size');
		padding: 0 18px 0 4px;

		&:hover {
			background-color: tp.cssVar('input-bg-hover');
		}
		&:focus {
			background-color: tp.cssVar('input-bg-focus');
		}
		&:active {
			background-color: tp.cssVar('input-bg-active');
		}
	}
	// Mode selector mark
	&_mm {
		@extend %tp-list_arrow;

		color: tp.cssVar('label-fg');
	}
	&.#{tp.$disabled} &_mm {
		opacity: 0.5;
	}
	// Text components wrapper
	&_w {
		@extend %tp-texts;

		flex: 1;
	}
	// Text component
	&_c {
		@extend %tp-texts_item;
	}
}
